<template>
  <div>
    <div class="topbg1">
      <div class="change">
        <div class="time" @click="timesel">
          {{moment(nowDate).format('YYYY-MM')}}
          <span></span>
        </div>
        <!-- <div class="changeright">
          <span :class="{'spanbor':choice == '0'}" @click="choice = '0'">全部</span>
          <span :class="{'spanbor':choice == '1'}" @click="choice = '1'">电费</span>
          <span :class="{'spanbor':choice == '2'}" @click="choice = '2'">物业</span>
        </div>-->
      </div>
      <!-- <p class="contp">共4笔缴费记录 &nbsp;合计</p> -->
      <p class="text_two">{{total}}</p>
      <p class="text_thid">已成功邀请人数</p>
    </div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div v-for="(item,index) in list" :key="index">
        <div class="item" @click="$router.push('/paymentdetail')">
          <div class="number">{{index+1}}.</div>
          <div class="left">
            <p>{{item.userName}}</p>
            <p>{{item.telphone}}</p>
          </div>
          <div class="right">
            <p class="rgtone">邀请时间</p>
            <p class="rgtone">{{moment(item.createTime).format('YYYY-MM')}}</p>
          </div>
        </div>
      </div>
    </van-list>
    <!-- <div class="foot">— 知行创想科技 —</div> -->
    <!-- 日历 -->
    <van-popup v-model="showCalendar" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirm"
        @cancel="showCalendar = false"
      />
    </van-popup>
  </div>
</template>
<script>
import { DatetimePicker, Popup, List } from 'vant';
import moment from 'moment';
export default {
  data() {
    return {
      moment,
      showCalendar: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2030, 10, 1),
      currentDate: new Date(),
      nowDate: new Date(),
      choice: '0',
      error: false,
      loading: false,
      finished: false,
      pageNum: 1,
      list: [],
      total: 0
    };
  },
  created() {
    // this.$http.post('/tuser/userInfo', {}).then(res => {
    //   if (res) {
    //     if (res.data.code === '0') {
    //       if (res.data.object.isAuth !== '1') {
    //         Dialog.alert({
    //           title: '提示',
    //           message: ''
    //         }).then(() => {});
    //       }
    //     }
    //   }
    // });
  },
  // watch: {
  //   nowDate() {}
  // },
  methods: {
    onLoad() {
      // 异步更新数据
      if (!this.finished) {
        setTimeout(() => {
          this.$http
            .post('/seckill/inviteRecord', {
              pageNum: this.pageNum++,
              createTime: moment(this.nowDate).format('YYYY-MM')
            })
            .then(res => {
              console.log(res);
              if (res.data.code === '0') {
                this.loading = false;
                this.list.push(...res.data.object.list);
                // this.list.loading = false;
                this.total = res.data.object.total;
                if (res.data.object.isLastPage) {
                  this.finished = true;
                  console.log(111);
                }
              } else {
                this.loading = false;
                this.finished = true;
              }
            });
        }, 500);
      }
    },
    // 时间选择确定按钮
    confirm(val) {
      this.nowDate = this.currentDate;
      this.showCalendar = false;
      this.list = [];
      this.finished = false;
      this.loading = false;
      this.pageNum = 1;
      console.log(moment(this.nowDate).format('YYYY-MM'));
    },
    // 点击选择时间
    timesel() {
      this.showCalendar = true;
    }
  },
  components: {
    'van-popup': Popup,
    'van-datetime-picker': DatetimePicker,
    'van-list': List
  }
};
</script>
<style lang="scss" scoped>
.topbg1 {
  height: 350px;
  background-image: linear-gradient(
      73deg,
      #ff91a8 0%,
      #ffadb3 50%,
      #ffc4bb 100%
    ),
    linear-gradient(#3889ff, #3889ff);
  background-blend-mode: normal, normal;
  background-blend-mode: normal, normal;
  flex-direction: column;
  display: flex;
  padding: 20px;
  // justify-content: center;
  // align-items: center;
  .contp {
    font-size: 28px;
    color: #ffffff;
    margin-top: 80px;
  }
  .text_two {
    font-size: 40px;
    color: #ffffff;
    font-size: 64px;
    margin-top: 60px;
  }
  .text_thid {
    font-size: 40px;
    color: #ffffff;
    font-size: 24px;
    // margin-top: 30px;
  }
  .change {
    display: flex;
    justify-content: space-between;
    .time {
      font-size: 30px;
      color: #ffffff;
      span {
        display: inline-block;
        width: 27px;
        height: 17px;
        background-image: url(../../assets/images//seckill/bottomcorrow.png);
        background-repeat: no-repeat;
        background-size: 100%;
      }
    }
    .changeright {
      width: 50%;
      display: flex;
      justify-content: space-around;
      span {
        font-size: 24px;
        color: #ffffff;
        width: 92px;
        height: 44px;
        text-align: center;
        line-height: 44px;
      }
      .spanbor {
        border-radius: 21px;
        border: solid 1px #ffffff;
      }
    }
  }
}
.item {
  height: 145px;
  background-color: #ffffff;
  border-bottom: solid 1px #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  .number {
    width: 8%;
    text-align: center;
    font-size: 26px;
    color: #222c38;
    font-weight: bold;
  }
  .left {
    width: 414px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 20px;
    :nth-child(1) {
      width: 414px;
      font-size: 26px;
      color: #222c38;
      font-weight: bold;
      // margin-bottom: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    :nth-child(2) {
      font-size: 26px;
      color: #222c38;
      font-weight: bold;
    }
  }
  .right {
    padding-left: 120px;
    .rgtone {
      font-size: 24px;
      color: #939393;
      text-align: center;
    }
  }
}
.foot {
  width: 100%;
  position: fixed;
  bottom: 0;
  text-align: center;
  font-size: 18px;
  color: #acacac;
}
</style>